<template>
  <div class="data-server" v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">

      <el-form-item label="权限" prop="reqList">
        <el-select
          v-model="form.reqList"
          multiple
          collapse-tags
          style="margin-left: 20px;"
          placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
      </el-form-item>

      <el-form-item label="token" v-if="token && token !== ''">
        {{token}}
      </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="apply">申请</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
  import {qrCode} from "@/api/qrCode";
  import {getToken, permit} from "@/api/dataServer";

  export default {
    name: 'HelloWorld',
    data() {
      return {
        loading: false,
        form: {
          reqList: null,
          remark: null
        },
        rules: {
          reqList: [
            {
              required: true,
              message: '请选择权限',
              trigger: 'blur'
            }
          ]
        },
        options: [],
        token: ''
      }
    },
    methods: {
      getPermit() {
        permit().then(res => {
          this.options = res.data.data
        })
      },

      apply() {
        let that = this;
        this.$refs['form'].validate(valid => {
          if (valid) {
            that.loading = true;
            getToken(that.form).then(res => {
              that.loading = false;
              that.token = res.data.data;
            })
          }
        })

      }
    },
    created() {
      this.getPermit()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .data-server {
    height: max-content;
    width: max-content;
  }
</style>
